<template>
	<view class="previewImage" v-if="show" @tap="close">
		<view class="page" v-if="urls.length > 0">
			<text class="text">{{ current + 1 }} / {{ urls.length }}</text>
		</view>
		<swiper class="swiper" :current="current" @change="swiperChange" @touchstart="handleTouchStart"
			@touchend="handleTouchEnd">
			<swiper-item v-for="(item, index) in urls" :key="index">
				<movable-area class="movable-area" scale-area>
					<movable-view class="movable-view" direction="none" :inertia="true" damping="100" scale="true"
						scale-min="1" scale-max="4" :scale-value="scale">
						<scroll-view scroll-y="true" class="uni-scroll-view">
							<view class="scroll-view">
								<image :key="index" class="image" :src="item" mode="widthFix"
									@longpress="onLongpress(item)" />
							</view>
						</scroll-view>
					</movable-view>
				</movable-area>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		nextTick
	} from 'vue';

	export default {
		props: {
			urls: {
				type: Array,
				required: true,
				default: () => {
					return [];
				}
			}
		},
		data() {
			return {
				startX: 0, // 触摸起始位置
				show: true,
				current: 0, //当前页
				scale: 1,
				isZooming: false // 是否处于缩放状态
			};
		},
		methods: {
			//打开
			open(current) {
				nextTick(() => {
					this.current = this.urls.findIndex(item => item === current);
					// this.show = true;
				})

				// this.$emit('open');
			},
			//关闭
			close() {
				if (!this.isZooming) {
					this.show = false;
					this.current = 0;
					this.$emit('close');
				}
			},
			beforeleave() {
				nextTick(() => {
					this.isShow = false;
					this.current = 0;
				})
			},
			//图片改变
			swiperChange(e) {
				this.current = e.detail.current;
			},
			//监听长按
			onLongpress(e) {
				// this.$emit('onLongpress', e);
			},
			handleTouchStart(e) {
				this.isZooming = true;
				// this.startX = e.touches[0].clientX; // 记录起始 X 坐标

			},
			handleTouchEnd(e) {
				this.isZooming = false;

				// const endX = e.changedTouches[0].clientX; // 获取结束 X 坐标
				// const deltaX = endX - this.startX; // 计算滑动距离

				// // 判断是否从边缘开始滑动
				// if (this.startX < 10 && deltaX > 50) { // 左边缘右滑
				// 	console.log('右滑手势');
				// 	this.show = false;
				// 	// 自定义行为
				// } else if (this.startX > window.innerWidth - 10 && deltaX < -50) { // 右边缘左滑
				// 	console.log('左滑手势');
				// 	this.show = false;
				// 	// 自定义行为
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	.previewImage {
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;

		.swiper {
			width: 100%;
			height: 100vh;

			swiper-item {
				.movable-area {
					height: 100%;
					width: 100%;

					.movable-view {
						width: 100%;
						min-height: 100%;

						.uni-scroll-view {
							height: 100vh;
						}

						.scroll-view {
							display: flex;
							align-items: center;
							justify-content: center;
							min-height: 100vh;

							.image {
								width: 100%;
								height: auto;
							}
						}
					}
				}
			}
		}

		.page {
			position: absolute;
			z-index: 9999;
			width: 100%;
			top: 60rpx;
			text-align: center;

			.text {
				color: #fff;
				font-size: 32rpx;
				background-color: rgba(0, 0, 0, 0.5);
				padding: 3rpx 16rpx;
				border-radius: 20rpx;
				user-select: none;
			}
		}
	}
</style>